<template>
	<div id='DJFBchart' style="width: 300px;height:280px;margin:0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts'
import {NEEDPERCENT} from '@/../static/js/apis.js'

export default{
	name: "DJSLchart",
	methods: {
		//绘制图形
		drawChart (data) {
			let myChart = echarts.init(document.getElementById('DJFBchart'))
			let options = {
			    title: {
			        text: '需求数据之比',
			        left: 'left'
			    },
			    tooltip: {
			        trigger: 'item',
			        formatter: '{b}:{c}({d}%) ' 
			    },
			    color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
			    series: [
			        {
			            type: 'pie',
			            radius: ['30%', '50%'],
			            avoidLabelOverlap: false,
			            itemStyle: {
			                borderRadius: 10,
			                borderColor: '#fff',
			                borderWidth: 2
			            },
			            data: data,
			            emphasis: {
			                itemStyle: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			myChart.setOption(options, true)
		},
		//获取数据
		getData () {
			const self = this;
			NEEDPERCENT('',function(res){
				if(res.obj){
					//绘制图形
					self.drawChart(res.obj);
				}
			})
		}
	},
	mounted () {
		this.getData();
	}
}
	
</script>

<style scoped>
	
</style>